<template>
  <div id="Header">
    <div class="lf-top">
      <em style="font-style: normal"
        >质量第一，客户至上；铸造辉煌，造福社会。
      </em>
      <div class="you">
        <a style="cursor: pointer" href="/"> 首页</a> ｜
        <a style="cursor: pointer" href="/contact"> 联系我们</a>
      </div>
    </div>
    <div class="logitem">
      <div class="logitemleft">
        <div class="logo">
          <a @click="ondispose">
            <img src="@/assets/images/log.png" />
          </a>
        </div>
        <div class="logotext"><h2>四川锦一建设工程有限公司</h2></div>
      </div>
      <div class="logitemright">
        <ul>
          <li
            v-for="(item, index) in narArr"
            :key="index"
            :class="{ check: index === zunref(currentIndex) }"
            @click="routerLink(index, item.path)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, unref, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Header",
  setup() {
    const router = useRouter();
    const currentIndex = ref(0);
    console.log(currentIndex);
    const narArr = [
      {
        path: "/",
        title: "首页",
      },
      {
        path: "/about",
        title: "公司介绍",
      },
      {
        path: "/project",
        title: "项目案例",
      },
      {
        path: "/news",
        title: "新闻中心",
      },
      {
        path: "/certification",
        title: "荣誉资质",
      },
      {
        path: "/human",
        title: "人才招聘",
      },
      {
        path: "/contact",
        title: "联系我们",
      },
    ];
    const zunref = (e) => {
      return unref(e);
    };
    // switch (router.currentRoute.value.params) {
    //   case "/index":
    //     this.currentIndex = 0;
    //     break;
    //   case "/about":
    //     this.currentIndex = 1;
    //     break;
    //   case "/project":
    //     this.currentIndex = 2;
    //     break;
    //   case "/news":
    //     this.currentIndex = 3;
    //     break;
    //   case "/certification":
    //     this.currentIndex = 4;
    //     break;
    //   case "/":
    //     this.currentIndex = 5;
    //     break;
    //   case "/contact":
    //     this.currentIndex = 6;
    //     break;
    //   default:
    //     break;
    // }
    const routerLink = (index, path) => {
      console.log(index, path);
      currentIndex.value = index;
      console.log(router.currentRoute.value.path);
      router.push(path);
    };
    const ondispose = () => {
      router.push("/");
      currentIndex.value = 0;
    };
    const zhang = (to) => {
      let newarr = to.split("/");
      switch (newarr[1]) {
        case "certification":
          currentIndex.value = 4;
          break;
        case "index":
          currentIndex.value = 0;
          break;
        case "contact":
          currentIndex.value = 6;
          break;
        case "news":
          currentIndex.value = 3;
          break;
        case "about":
          currentIndex.value = 1;
          break;
        case "project":
          currentIndex.value = 2;
          break;
        case "human":
          currentIndex.value = 5;
          break;
        default:
      }
    };
    const tocontact = () => {
      router.push("contact");
    };
    const tohome = () => {
      router.push("/");
    };
    watch(
      () => router.currentRoute.value.path,
      (to) => {
        console.log("路由发生了改变", to);
        zhang(to);
      }
    );
    return {
      currentIndex,
      tohome,
      tocontact,
      ondispose,
      narArr,
      routerLink,
      zhang,
      zunref,
    };
  },
});
</script>

<style lang="scss" scoped>
#Header {
  height: 120px;
  margin: auto;
  background: url("@/assets/images/header.png") no-repeat center;
  position: relative;
  .lf-top {
    width: 1400px;
    margin: 0 auto;
    padding-top: 9px;
    color: #bababa;
    font-size: 12px;
    .you {
      float: right;
      > a {
        color: #bababa;
        text-decoration: none;
      }
    }
  }
  .logitem {
    width: 1400px;
    margin: auto;
    position: relative;
    .logitemleft {
      width: 320px;
      height: 68px;
      margin-top: -25px;
      float: left;
      .logo {
        height: 75px;
        position: relative;
        left: 9px;
        top: 40px;
        > a > img {
          width: 88px;
          height: 75px;
        }
      }
      .logotext {
        position: absolute;
        top: 27px;
        left: 100px;
        color: #fff;
        font-size: 12px;
      }
    }
    .logitemright {
      width: 622px;
      height: 34px;
      float: right;
      text-align: center;
      font-size: 16px;
      margin: 40px auto 0;
      padding-right: 120px;
      ul {
        display: flex;
        li {
          display: block;
          width: 90px;
          height: 20px;
          list-style: none;
          font-size: 14px;
          &:hover {
            background: url("../assets/images/nav_ho.png");
            color: #fff;
          }
        }
      }
      .check {
        color: #fff;
        background: url("@/assets/images/nav_ho.png");
      }
    }
  }
}
</style>
